<template>
  <div>
    <NavBar/>
    <div class="container">
      <div class="w73 classify">
          <!-- 选择问题分类 -->
          <div class="item sel-cy">
            <div class="item-h">
              <b class="ftz16">选择问题分类</b>
              <span>提问分类是一个问题的类型，它有助于为你匹配擅长该类问题的大咖回答。</span>
            </div>
            <div class="sel-cy-g" id="sel_g">
              <dt>
                <dl v-for="(item, index) in categoryList" :key="item.name" @click="selectCategory(index, item.id)">
                  <span class="icon" :class="{'on':currentCategoryIndex === index}"></span>
                  <span name>{{item.name}}</span>
                </dl>
              </dt>
            </div>
          </div>
          <!-- 分类的大咖列表 -->
          <div class="all-lis-box" v-if="masterListArr.length > 0 && currentCategoryIndex >= 0">
            <div class="item sel-lis" v-for="(item, index) in categoryList" :key="item.name" v-show="currentCategoryIndex === index">
              <div class="item-h">
                <b class="ftz16" id="lis_title">
                  <span >擅长<i>{{categoryList[currentCategoryIndex].name}}</i></span>
                </b>
                <span class="tip">专业的大咖一对一问答</span>
                <span class="search fr">
                  <input type="text" placeholder="搜索" v-model="searchDataArr[currentCategoryIndex].name_search">
                  <a href="javascript:void(0)" class="search-btn" @click="doSearch()"></a>
                </span>
              </div>
              <div class="sel-lis-c">
                <template v-if="masterListArr[currentCategoryIndex].list.length > 0">
                  <ul>
                    <li v-for="item in masterListArr[currentCategoryIndex].list" :key="item.id">
                      <router-link :to="'/dashboard/qa/' + item.sysUserFieldTagVO.userId">
                        <div class="photo">
                          <span class="photo-img"><img :src="item.sysUserFieldTagVO.avatar"></span>
                          <img src="../../assets/res/img/icon_appr.png" class="appr">
                        </div>
                        <div class="info">
                          <div class="title">
                            <b class="ftz16">{{item.sysUserFieldTagVO.authName}}</b>
                            <span class="line"></span>
                            <span>擅长：{{item.sysUserFieldTagVO.field}}</span>
                            <span class="line"></span>
                            <span>回答数：{{item.sysUserFieldTagVO.answerCount ? item.sysUserFieldTagVO.answerCount : 0}}</span>
                          </div>
                          <a href="javasctipt:void(0)" class="txt">{{item.sysUserFieldTagVO.comment}}</a>
                        </div>
                        <button @click.stop.prevent="showQuestionBox(item)" v-if="!item.sysUserFieldTagVO.answerPay" class="quiz-btn" quiz>免费提问</button>
                        <button @click.stop.prevent="showQuestionBox(item)" v-else class="quiz-btn" quiz><span class="icon-coin"></span>{{parseFloat(item.sysUserFieldTagVO.answerPay)}}提问</button>
                      </router-link>
                    </li>
                  </ul>
                  <button v-if="masterListArr[currentCategoryIndex].total > masterListArr[currentCategoryIndex].list.length"
                    class="load-more-btns ftz16" @click="loadMore(currentCategoryIndex)">
                    <template v-if="masterListArr[currentCategoryIndex].isLoadingMore">
                      <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
                      <span>正在加载，请稍候......</span>
                    </template>
                    <span v-else>点击加载更多...</span>
                  </button>
                </template>
                <NoDataTips v-else/>
              </div>
            </div>
          </div>
          <!-- 全部大咖列表 -->
          <div class="item sel-lis"  v-show="currentCategoryIndex === -1">
            <div class="item-h">
              <b class="ftz16" id="lis_title">
                <span v-if="currentCategoryIndex < 0">热门大咖</span>
                <span v-else>擅长<i>{{categoryList[currentCategoryIndex].name}}</i></span>
              </b>
              <span class="tip">专业的大咖一对一问答</span>
              <span class="search fr">
                <input type="text" placeholder="搜索" v-model="searchData.name_search">
                <a href="javascript:void(0)" class="search-btn" @click="doSearch()"></a>
              </span>
            </div>
            <div class="sel-lis-c">
              <template v-if="allMasterList.list.length >0">
                <ul>
                  <li v-for="item in allMasterList.list" :key="item.id">
                    <router-link :to="'/dashboard/qa/' + item.sysUserFieldTagVO.userId">
                      <div class="photo">
                        <span class="photo-img"><img :src="item.sysUserFieldTagVO.avatar"></span>
                        <img src="../../assets/res/img/icon_appr.png" class="appr">
                      </div>
                      <div class="info">
                        <div class="title">
                          <b class="ftz16">{{item.sysUserFieldTagVO.authName}}</b>
                          <span class="line"></span>
                          <span>擅长：{{item.sysUserFieldTagVO.field}}</span>
                          <span class="line"></span>
                          <span>回答数：{{item.sysUserFieldTagVO.answerCount ? item.sysUserFieldTagVO.answerCount : 0}}</span>
                        </div>
                        <a href="javasctipt:void(0)" class="txt">{{item.certification.descs}}</a>
                      </div>
                      <button @click.stop.prevent="showQuestionBox(item)" v-if="!item.sysUserFieldTagVO.answerPay" class="quiz-btn" quiz>免费提问</button>
                      <button @click.stop.prevent="showQuestionBox(item)" v-else class="quiz-btn" quiz><span class="icon-coin"></span>{{parseFloat(item.sysUserFieldTagVO.answerPay)}}提问</button>
                    </router-link>
                  </li>
                </ul>
                <button v-if="allMasterList.total > allMasterList.list.length"
                  class="load-more-btns ftz16" @click="loadMore(currentCategoryIndex)">
                  <template v-if="allMasterList.isLoadingMore">
                    <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
                    <span>正在加载，请稍候......</span>
                  </template>
                  <span v-else>点击加载更多...</span>
                </button>
              </template>
              <NoDataTips v-else/>
            </div>
          </div>
      </div>
      <!-- 提问弹窗 -->
      <transition name="fade">
        <QuestionBox v-show="questionBoxFlag"
        @closeFn="closeQuestionBox"
        @submitFn="submitQuestion"
        :masterInfo="targetMasterInfo"/>
      </transition>
    </div>
    <Footer/>
  </div>
</template>

<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import QuestionBox from '@/components/questionAnswer/question-box'
import {
  getRecommendMasterPage,
  getQuestionCategory
} from '@/service/api'
export default {
  components: {
    NavBar,
    Footer,
    QuestionBox
  },
  data () {
    return {
      questionBoxFlag: false,
      // 选中提问的大咖
      targetMasterInfo: {
        id: '',
        name: '',
        avatar: '',
        comment: '',
        field: '',
        answerCount: '',
        answerPay: ''
      },
      // 全部大咖数据
      allMasterList: {
        list: [],
        total: 0,
        isLoadingMore: false
      },
      // 全部大咖时使用的查询条件
      searchData: {
        pageSize: 5,
        pageNum: 1,
        name_search: '',
        fieldId: ''
      },
      currentCategoryIndex: -1, // 全部大咖
      selectedCategory: '',
      categoryList: [],
      layerLoad: null,
      // 分类大咖时使用的查询条件
      searchDataArr: [],
      // 分类大咖数据
      masterListArr: []
    }
  },
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
      this.initDataList()
    })
  },
  methods: {
    /**
     * 初始化页面数据，多个ajax同时请求
     */
    initDataList () {
      Promise.all([
        this.getRecommendMasterList(),
        this.getQuestionCategoryList()
      ]).then((res) => {
        if (window.layer) {
          window.layer.close(this.layerLoad)
        }
        // 推荐大咖 全部
        let masterData = res[0]
        if (masterData.status === 200) {
          this.allMasterList.list = masterData.data.list
          this.allMasterList.total = masterData.data.total
        }
        // 问答分类
        let categoryData = res[1]
        if (categoryData.status === 200) {
          this.categoryList = categoryData.data
          this.initSearchArr()
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    doSearch () {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
      this.getRecommendMasterList().then((res) => {
        if (res.status === 200) {
          let index = this.currentCategoryIndex
          // 区分是否为全部大咖
          if (index < 0) {
            this.allMasterList.list = res.data.list
            this.allMasterList.total = res.data.total
          } else {
            this.masterListArr[this.currentCategoryIndex].list = res.data.list
            this.masterListArr[this.currentCategoryIndex].total = res.data.total
            this.masterListArr[this.currentCategoryIndex].loaded = true // 数据已经请求过
          }
          if (window.layer) {
            window.layer.close(this.layerLoad)
          }
        }
      })
    },
    selectCategory (index, id) {
      this.currentCategoryIndex = index
      this.searchDataArr[index].fieldId = id
      // 为否已经加载过
      if (!this.masterListArr[this.currentCategoryIndex].loaded) {
        this.doSearch()
      }
    },
    // 显示提问弹窗
    showQuestionBox (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再提问！')
        return false
      }
      if (this.userId === item.sysUserFieldTagVO.userId) {
        window.layui.layer.msg('不能向自己提问！')
        return false
      }
      this.questionBoxFlag = true
      this.targetMasterInfo = {
        id: item.sysUserFieldTagVO.userId,
        name: item.sysUserFieldTagVO.authName,
        avatar: item.sysUserFieldTagVO.avatar,
        comment: item.sysUserFieldTagVO.comment,
        field: item.sysUserFieldTagVO.field,
        fieldId: item.sysUserFieldTagVO.fieldId,
        answerCount: item.sysUserFieldTagVO.answerCount,
        answerPay: item.sysUserFieldTagVO.answerPay
      }
    },
    // 关闭提问弹窗
    closeQuestionBox () {
      this.questionBoxFlag = false
    },
    // 提交问题
    submitQuestion () {
      this.questionBoxFlag = false
      console.log('ok')
    },
    // 推荐大咖
    async getRecommendMasterList () {
      let tempSearchData = this.currentCategoryIndex < 0 ? this.searchData : this.searchDataArr[this.currentCategoryIndex]
      let list = await getRecommendMasterPage(tempSearchData)
      return list
    },
    // 分类
    async getQuestionCategoryList () {
      let list = await getQuestionCategory({classify: 'field'})
      return list
    },
    /**
     * 初始化多个数据数组，和搜索条件数组
     */
    initSearchArr () {
      for (let i = 0; i < this.categoryList.length; i++) {
        this.searchDataArr.push({
          pageSize: 6,
          pageNum: 1,
          name_search: '',
          fieldId: ''
        })
        this.masterListArr.push({
          key: this.categoryList[i].name,
          total: 0,
          list: [],
          isLoadingMore: false,
          loaded: false
        })
      }
    },
    loadMore () {
      let index = this.currentCategoryIndex
      if (index > 0) {
        this.masterListArr[index].isLoadingMore = true
        this.searchDataArr[index].pageNum++
        this.getRecommendMasterList().then((res) => {
          this.masterListArr[index].isLoadingMore = false
          if (res.status === 200) {
            this.masterListArr[this.currentCategoryIndex].list.push(...res.data.list)
          } else {
            this.searchDataArr[index].pageNum--
            this.errorMsg()
          }
        })
      } else {
        // 全部大咖
        this.searchData.isLoadingMore = true
        this.searchData.pageNum++
        this.getRecommendMasterList().then((res) => {
          this.allMasterList.isLoadingMore = false
          if (res.status === 200) {
            this.allMasterList.list.push(...res.data.list)
          } else {
            this.searchData.pageNum--
            this.errorMsg()
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
$icon:'../../assets/res/img/icon_re.png';
.classify{
  margin: 40px auto 0 auto;
}
.sel-cy{
  padding: 0 10px;
}
.sel-cy .item-h{
  padding: 0 16px;
}
.sel-cy .item-h span{
  color: #808080;
  margin-left: 10px;
}
.sel-cy .sel-cy-g{
  padding: 0 70px 26px 70px;
}
.sel-cy .sel-cy-g dl{
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin:26px 44px 0 0;
}
.sel-cy .sel-cy-g dl:nth-child(6n){
  margin-right: 0;
}
.sel-cy .sel-cy-g .icon{
  display: block;
  width: 80px;
  height: 80px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: 0 -295px;
  cursor: pointer;
  border-radius: 50%;
  margin-bottom: 10px;
}
.sel-cy .sel-cy-g .on{
  background-position: -134px -295px;
}
.sel-lis{
  padding: 1px 10px;
  margin-top: 30px;
}
.sel-lis .item-h{
  padding: 0 16px;
  height: 72px;
  line-height: 72px
}
.sel-lis .item-h i{
  color: #e94f4f;
}
.sel-lis .item-h .tip{
  margin-left: 12px;
  display: inline-block;
  vertical-align: middle;
  width: 156px;
  height: 26px;
  line-height: 24px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: 0px -427px;
  color: #fff;
  font-size: 12px;
  text-indent: 10px;
}
.sel-lis .item-h .search{
  display: inline-block;
  vertical-align: middle;
  width: 270px;
  height: 42px;
  margin: 15px 0;
  position: relative;
}
.sel-lis .item-h .search input{
  width: 196px;
  height: 42px;
  padding: 0 50px 0 24px;
  background-color: #f2f2f2;
  border-radius: 21px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: 230px -221px;
  float: left;
  border: none;
}
.sel-lis .item-h .search .search-btn{
  position: absolute;
  width: 24px;
  height: 42px;
  right: 18px;
  top: 0;
  z-index: 100;
}
.sel-lis .sel-lis-c li{
  padding: 16px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
}
.sel-lis .sel-lis-c .photo{
  width: 60px;
  height: 60px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.sel-lis .sel-lis-c .photo-img img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.sel-lis .sel-lis-c .photo .appr{
  position: absolute;
  right: 0;
  bottom: 0;
}
.sel-lis .sel-lis-c .info{
  width: 590px;
  height: 60px;
  display: inline-block;
  vertical-align: top;
  margin-left: 16px;
}
.sel-lis .sel-lis-c .info .title{
  margin: 10px 0;
}
.sel-lis .sel-lis-c .info .title span{
  color: #808080;
}
.sel-lis .sel-lis-c .info .title .line{
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 14px;
  background: #ebebeb;
  margin: -4px 8px 0 8px;
}
.sel-lis .sel-lis-c .info .txt{
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #808080;
}
.sel-lis .sel-lis-c .quiz-btn{
  color: #f23e3e;
  font-weight: bold;
  width: 104px;
  height: 34px;
  border-radius: 17px;
  background-color: #ffeceb;
  position: absolute;
  right: 16px;
  top: 34px;
}
</style>
